<template>
  <div class="app-container calendar-list-container">

    <!-- 查询和其他操作 -->
    <el-card>
      <div class="block">
        <span style="color:gray font-size:16px"> 查询日期: </span>
        <el-date-picker
          v-model="listQuery.value2"
          value-format="yyyy-MM-dd"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions1"
        >
        </el-date-picker>
        <el-select
          clearable
          class="filter-item"
          style="width: 200px"
          placeholder="请选择变动类型"
          v-model="listQuery.value"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button
          size="mini"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="init"
        >查询</el-button>
      </div>
    </el-card>

    <!-- 查询结果 -->
    <el-table
      size="small"
      :data="list"
      v-loading="listLoading"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        align="center"
        width="100px"
        label="ID"
        prop="id"
        sortable
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="时间"
        prop="modifyTime"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="类型"
        prop="type"
      >
        <template slot-scope="scope">
          <el-tag>{{typeDic[scope.row.type]}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="变动原因"
        prop="modifyReason"
      >
      </el-table-column>

      <el-table-column
        align="center"
        label="爱币/人民币"
        prop="modifyAmount"
      >
      </el-table-column>

      <el-table-column
        align="center"
        label="积分"
        prop="modifyIntegral"
      >
      </el-table-column>

      
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[10,20,30,50]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { getWalletList } from '@/api/wallet'
import store from '@/store'

export default {
  name: 'WalletRecord',
  data() {
    return {
      list: null,
      total: undefined,
      listLoading: true,
      values: undefined,
      listQuery: {
        page: 1,
        limit: 10,
        value: '',
        value2: '',
        mechanismId: store.getters.mechanismId,
        mobile: '',
        sort: 'modify_time',
        order: 'desc'
      },
      typeDic: ['', '充值', '支出', '兑换', '退款', '返赠', '购物'],
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      options: [
        // {
        //   value: '1',
        //   label: '充值'
        // },
        // {
        //   value: '2',
        //   label: '支出'
        // },
        // {
        //   value: '3',
        //   label: '兑换'
        // },
        {
          value: '5',
          label: '返赠'
        },
        {
          value: '6',
          label: '购物'
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getWalletList(this.listQuery)
        .then(response => {
          this.list = response.data.data.items
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    init() {
      this.listQuery.page = 1
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    }
  }
}
</script>
<style>
.alipay {
  width: 200rect;
  height: 100rect;
  background-color: red;
}
.rra {
  margin-bottom: 100px;
}
.abimg {
  margin-bottom: -15px;
  height: 40px;
}
</style>
